<script src="../api/home.js"></script>
<template>
  <el-row class="home-row">
    <el-col :span="13" >
      <div class="block">
        <el-timeline>
          <el-timeline-item v-for="item in matchList" :key="item.matchId" :timestamp="item.matchDate" placement="top">
            <el-card>
               <el-row>
                <el-col :span="7">
                    <image-preview :src="item.matchLogo" :width="150" :height="150"/>
                </el-col>
                <el-col :span="17">
                  <h2>{{ item.matchName }}</h2>
                  <p>比赛时间：{{ parseTime(item.matchDate, '{y}-{m}-{d}')+" "+item.matchStartTime+":00 - "+ parseTime(item.matchDate, '{y}-{m}-{d}')+" "+item.matchEndTime+":00"}}</p>
                  <p>比赛场馆：{{item.venueName+"-"+item.fieldName }}</p>
                  <p>最大预约人数：{{item.matchMaxPeople}} <span style="margin-left: 30px"></span>   已预约人数：{{item.matchAppointmentsPeople}}</p>
                  <el-button type="primary" round style="position: absolute;bottom: 5px;right: 5px" @click="yuyue(item)">预约</el-button>
                </el-col>

              </el-row>
            </el-card>
          </el-timeline-item>
        </el-timeline>

      </div>
    </el-col>

    <el-col :span="9" style="margin-left: 25px">
      <el-row style="margin-top: 25px">
        <el-collapse  >
          <el-collapse-item v-for="item in noticeList" :title="item.noticeTitle" :name="item.noticeId">
            <div v-html="item.noticeContent"></div>
          </el-collapse-item>
        </el-collapse>
      </el-row>
      <el-row style="margin: 10px;padding:20px 10px;box-shadow: 0 0 4px rgb(148,147,147); border-radius: 10px;min-height: 200px">
        <el-row v-for="item in commentList" :key="item.commentId" style="padding-bottom: 10px;border-bottom: #d5d5d5 solid 1px">
          <span style="color: #fd2626;margin-right: 15px">{{item.matchName}}</span>
          <span style="font-weight: bold;margin-right: 5px">{{item.createBy}}:</span><span style="color: #989797">{{item.content}}</span>
        </el-row>

      </el-row>

    </el-col>


    <el-dialog
      title="预约比赛"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>您确定要预约 {{match.matchName}} 比赛吗? </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="submitYuYue">确 定</el-button>
  </span>
    </el-dialog>
  </el-row>
</template>

<script>
import { listHomeMatch,listNotice,addOrder,listComment } from "@/api/home";

export default {
  name: "Index",
  data() {
    return {
      matchList:[],
      noticeList:[],
      commentList:[],
      dialogVisible: false,
      match:{
        matchName:null,
        matchId:null

      }
    };
  },
  created() {
    this.initHome();
  },
  methods: {
    submitYuYue(){
      this.dialogVisible = false;
      addOrder({matchId:this.match.matchId}).then(res=>{
        this.$message({
          message: '恭喜您，预约成功!',
          type: 'success'
        });
      })
    },
    yuyue(match){
      this.match=match;
      this.dialogVisible = true;

    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false;
    },
    initHome(){
      listHomeMatch().then(res=>{
        this.matchList=res
      });
      listNotice({pageNum:1,pageSize:100}).then(res=>{
        this.noticeList=res.rows;
      });
      listComment({pageNum:1,pageSize:100}).then(res=>{
        this.commentList=res.rows;
        console.log(this.commentList)
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home-row{
  margin-top: 25px;
}
</style>

